<template>
	<view class="app-container">
		<image class="logo" src="/static/icon_flag.png"></image>
		<view class="flag-list">
			<view class="flag-item" v-for="(item,index) in flagList" :key="'flag' + index">
				<view @click="pushDetail(item.id)">
					<image class="image" :src="item.src" mode="widthFix"></image>
					<view class="content">
						<text class="title">{{item.title}}</text>
						<view class="time">{{item.time}}</view>
						<!-- <rich-text class="description" :nodes="item.description"></rich-text> -->
						<text class="description">{{item.description}}</text>
					</view>
				</view>
				<view class="bottom">
					<!-- <view class="type">{{getTypeName(item.type)}}</view> -->
					<view class="buttons">
						<image class="collect" :src="item.like==1?'/static/resources/collect-sel.png':'/static/resources/collect.png'" @click="likeIn(item,index)"></image>
						<span>喜欢</span>
						<button open-type="share" 
						 :data-url="(item.id)"
						 :data-src="(item.src)"
						 :data-title="(item.title)"
						size="default" type="default"
						style="padding: 0;font-size: 22rpx;border: none;line-height: 28rpx;display: flex;color:#808080">
							<image class="share" src="/static/resources/share.png"></image>
							<span>分享</span>
						</button>
					</view>
				</view>
			</view>
			
		</view>
		
	</view>
	<entry-modal v-show="!isLogin" @close='checkLogin'></entry-modal>
	
</template>

<script>
	import { getListInfoData, like, getUserInfo, share } from '../../../api';
	import entryModal from '@/components/entryModal.vue'
	import { config } from '../../../utils/utils';
	export default {
		components: {
			entryModal
		},
		data() {
			return {
				isLogin: true,//是否登录
				
				/**
				 * @description
				 * id
				 * type 人物介绍/推荐活动
				 * src 顶部图片
				 * title 标题
				 * time 时间
				 * description 具体内容 
				 **/
				flagList: [],//列表数据
				page:1,
				typeList: [
					{
						name: '推荐活动',
						value: 1,
					},
					{
						name: '人物介绍',
						value: 2
					}
				]
			}
		},
		onLoad() {
			this.checkLogin();
		},
		onPullDownRefresh() {
		  this.page = 1;
		  this.getList();
		},
		onReachBottom() {
			 this.page += 1;
			 this.getList();
		},
		onShareAppMessage (e) {
			let that = this;
			const promise = new Promise(resolve => {
			  setTimeout(() => {
				resolve({})
				that.shareArticle(e.target.dataset.url);
			  }, 10)
			})
			return {
			  title: e.target.dataset.title, //自定义分享标题			 
			  path: '/pages/detail/detail?id='+e.target.dataset.url,
			  imageUrl: e.target.dataset.src, //可设置默认分享图，不设置默认截取头部5:4
			  promise,
			  success: function(res) {
				  console.log("res=====",res)
				console.log('分享成功')
			  }
			}
		  },

		methods: {
			shareArticle(id) {
				let userInfo = uni.getStorageSync(config.userInfo)
				let openId = userInfo.openid;
				let param = {
					openId: userInfo.openid,
					aid: id
				};
				share(param).then(res=>{
					uni.showToast({
						title:'分享成功'
					})
					getUserInfo({openId: openId}).then(res=>{
						if(res.info) uni.setStorageSync(config.userInfo,res.info)
					})
				})
			},
			checkLogin() {
				if(uni.getStorageSync(config.userInfo)) {
					this.isLogin = true;
					uni.showTabBar();	
					this.getList();
				}else {
					this.isLogin = false;
					uni.hideTabBar();	
				}	
			},
			getList() {
				let userInfo = uni.getStorageSync(config.userInfo);
				let param = {
					openId: userInfo.openid,
					page: this.page
				}
				getListInfoData(2,param).then(res=>{
					if(this.page > 1) {
						if(res.info) this.flagList = this.flagList.concat(res.info);
					}else{
						if(res.info) this.flagList = res.info;
						else this.flagList = [];
					}	
					uni.stopPullDownRefresh()
				})
				return;
				let length = 10;
				this.flagList.push({
					id:1,
					type:1,
					src:"https://trip.chinahood.net/assets/wechaapp/images/flag2.png",
					title:"肩并肩毅起GO",
					time:"2024-06-03",
					description:"",
				},
				{
					id:2,
					type:1,
					src:"https://trip.chinahood.net/assets/wechaapp/images/flag1.png",
					title:"拆解毅行者100K路线",
					time:"2024-06-05",
					description:"",
				},
				{
				id:3,
				type:2,
				src:"https://trip.chinahood.net/assets/wechaapp/images/flag3.png",
				title:"型男跑团助阵毅行热身训练",
				time:"2024-06-05",
				description:"",	
				},
				{
				id:4,
				type:1,
				src:"https://trip.chinahood.net/assets/wechaapp/images/flag4.png",
				title:"四步轻松解锁央妈都在推广的超慢跑",
				time:"2024-06-08",
				description:"",	
				},
				);
			
				
				// for (var i = 0; i < length; i++) {
				// 	let param = {
				// 		id: (i + 1),
				// 		type: i%2==0?1:2,
				// 		src: 'https://api.softouchco.com/hsbc/flag' + (i%2==0?1:2) + '.png',
				// 		title: '活动标题' + (i + 1),
				// 		time: '2024-06-07',
				// 		description: '活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容',
				// 	}
				// 	this.flagList.push(param);
				// }
			},
			getTypeName(type) {
				let arrM = this.typeList.filter(item=>item.value==type);
				if(arrM.length) return arrM[0].name;
				else return '推荐活动';
			},
			pushDetail(id) {
				uni.navigateTo({
					url:'/pages/detail/detail?id=' + id
				})
			},
			
			likeIn(item,index) {
				if(item.like == 1) {
					uni.showToast({
						title:'请勿重复操作！',
						icon: 'none'
					})
					return;
				}
				
				
				let userInfo = uni.getStorageSync(config.userInfo)
				let openId = userInfo.openid;
				let param = {
					openId: openId,
					aid: item.id
				}
				like(param).then(res=>{
					uni.showToast({
						title:'点赞成功'
					})
					this.flagList[index].like = 1;
					getUserInfo({openId: openId}).then(res=>{
						if(res.info) uni.setStorageSync(config.userInfo,res.info)
					})
				})				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.app-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 30rpx;
		.logo {
			width: 60rpx;
			height: 60rpx;
			margin-top: 60rpx;
		}
		.flag-list {
			width: 100%;
			display: flex;
			flex-direction: column;
			.flag-item {
				display: flex;
				flex-direction: column;				
				background: #F8F8F8;
				margin-top: 46rpx;
				border-radius: 0px;
				overflow: hidden;
				padding: 0rpx;

				&:first-child {
					margin-top: 0;
				}
				.image {
					width: 100%;
				}
				
				.content {
					 padding: 20rpx;
					// padding-bottom: 0;
					.title {
						color: #333333;
						font-size: 30rpx;
						font-weight: bold;						
					}
					.time {
						color: #808080;
						margin-top: 30rpx;
						font-size: 24rpx;
						margin-bottom: 10rpx;
					}
					.description {
						font-size: 24rpx;
						line-height: 1.5;
						color: #808080;
						padding-right: 40rpx;						
					}
				}
				.bottom {
					display: flex;
					justify-content: flex-end;
					margin-top: 40rpx;
					height: 40rpx;
					padding: 20rpx;
					.type {
						font-size: 22rpx;
						letter-spacing: 0rpx;
						// width: 120rpx;
						padding:0 10rpx;
						height: 40rpx;
						line-height: 40rpx;
						background: #E6E6E6;
						color: #333333;
						text-align: center;
					}
					.buttons {
						font-size: 22rpx;
						display: flex;
						justify-content: center;
						align-items: flex-end;
						height: 32rpx;
						color: #808080;
						.collect {
							width: 32rpx;
							height: 30rpx;
							margin-right: 10rpx;
						}
						.share {
							margin-left: 30rpx;
							margin-right: 10rpx;
							width: 28rpx;
							height: 28rpx;
						}
						span {
							margin-left: 10rpx;
						}
						button::after {
							content: none;
						}
					}
				}
					
			}
		}
	}
</style>
